<template>
  <div class="monthly-record">
	  <h>{{datas.title}}</h>
    <div class="container" ref="monthlyChart" ></div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, onMounted, ref,reactive } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios'
import moment from 'moment';
const datas = reactive({
	data:[],
	newdata:[],
	title:''
})
const monthlyChart = ref(null);
const getpaper = async ()=>{
	datas.newdata=[]
	try {
		const response = await axios.get('/login/v1/examination/paper',{
			 headers: {
				'TOKEN': localStorage['token']
			  },
		})
			  
		const data = response.data
		if (data.code == 0) {
			for(let i in data.data){
				if(localStorage.getItem('auth_level')=='100'){
					const date = new Date(data.data[i].post_time)
					const formattedTime = moment(date).format('MM')
					datas.newdata.push(formattedTime)
					datas.title = "每月试卷发布数统计"
				}else{
					datas.title = "每月试卷完成数统计"
					 if(data.data[i].status!=false){
						 const date = new Date(data.data[i].post_time)
						 const formattedTime = moment(date).format('MM')
						 datas.newdata.push(formattedTime)
					 }
				}
				
			}
			const counts = datas.newdata.reduce((acc, cur) => {
			const month = Number(cur) - 1; // 将月份转换为从0开始的索引
			  acc[month] = (acc[month] || 0) + 1; // 累加月份对应的计数器
			  return acc;
			}, new Array(12).fill(0)); // 初始化长度为12的数组，元素全部为0
			datas.data=counts
			} 
			
	} catch (error) {
			console.error(error)
		  }finally{
		   getechart()
		  }
}
const getechart = ()=>{
	const Chart = monthlyChart.value as HTMLDivElement;
	const container = echarts.init(Chart);
	const option: echarts.EChartsOption = {
	  xAxis: {
	    type: 'category',
	    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  series: [
	    {
	      data: datas.data,
	      type: 'bar'
	    }
	  ]
	};
	container.setOption(option);
}
onMounted(() => {
	getpaper()
	

    });

</script>

<style scoped>
.container {
  width: 100%;
  height: 500px;
}
</style>
